<!DOCTYPE html>
<!-- 文件上传页面 -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
		<script src="layui/layui.js" type='text/javascript'></script>
		
		<title>招聘简章上传</title>
	</head>
	<!--  常规文件的上传-->
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend>招聘简章的上传</legend>
		</fieldset>
		 
		<!-- <div class="layui-upload">
		  <button type="button" class="layui-btn" id="test1">上传图片</button>
		  <div class="layui-upload-list">
		    <img class="layui-upload-img" id="demo1">
		    <p id="demoText"></p>
		  </div>
		</div>   
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend>选完文件后不自动上传</legend>
		</fieldset>
		 
		<div class="layui-upload">
		  <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
		  <button type="button" class="layui-btn" id="test9">开始上传</button>
		</div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend>拖拽上传</legend>
		</fieldset> 
		 -->
		<div class="layui-upload-drag" id="test10">
		  <i class="layui-icon"></i>
		  <p>点击上传，或将文件拖拽到此处</p>
		  <div class="layui-hide" id="uploadDemoView">
		    <hr>
		    <img src="" alt="上传成功后渲染" style="max-width: 196px">
		  </div>
		</div>
		
		
		
		<script type="text/javascript">
			layui.use('upload', function(){
			  var $ = layui.jquery
			  ,upload = layui.upload;
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#test1'
			    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#demo1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			  
			   upload.render({
			      elem: '#test8'
			      ,url: 'https://httpbin.org/post' //改成您自己的上传接口
			      ,auto: false
			      //,multiple: true
			      ,bindAction: '#test9'
			      ,done: function(res){
			        layer.msg('上传成功');
			        console.log(res)
			      }
			    });
				//标记后
				  //设定文件大小限制
				  upload.render({
				    elem: '#test7'
				    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
				    ,size: 60 //限制文件大小，单位 KB
				    ,done: function(res){
				      layer.msg('上传成功');
				      console.log(res)
				    }
				  });
				
				 //拖拽上传，上传接口的对接
				  upload.render({
				    elem: '#test10'
				    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
				    ,done: function(res){
				      layer.msg('上传成功');
				      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
				      console.log(res)
				    }
				  });
				  
				  });
				
				
				
				
			    
		
				
			</script>
	</body>
</html>
